<template>
    <div class="setting__base">
        <form>
            <li class="form-item">
                <n-h6>比赛名称</n-h6>
                <n-input size="small" v-model:value="form.gameName" placeholder="请输入比赛名称！"
                    :disabled="loading"></n-input>
            </li>
            <li class="form-item">
                <n-h6>比赛LOGO</n-h6>
                <n-upload accept="image/*" color="#8590a6" :custom-request="customRequestTeam" list-type="image-card"
                    :max="1" @before-upload="beforeAvatarUpload" :default-file-list="gameLogoList">
                    战队LOGO
                </n-upload>
            </li>
            <li class="form-item">
                <n-h6>战队配置</n-h6>
                <GameSetting />
            </li>
            <li class="form-item center">
                <n-button size="small" type="primary" @click="handleSave" :loading="loading">保 存</n-button>
                <n-button size="small" @click="routerBack">返 回</n-button>
            </li>
        </form>
    </div>
</template>

<script setup lang='ts'>
import storeHelper from '@/utils/TauriStore';
import { SettingForm, baseSetting } from './baseSetting';
import { UploadCustomRequestOptions, UploadFileInfo, useMessage } from 'naive-ui';
import GameSetting from './GameSetting.vue';
const router = useRouter();
const form = reactive<SettingForm>({
    gameName: '',
    gameLogo: ''
});
const loading = ref(true);
const gameLogoList = ref<UploadFileInfo[]>([]);
const routerBack = () => {
    router.back();
}
const message = useMessage();
onMounted(async () => {
    try {
        loading.value = true;
        const settings = await storeHelper.get('baseSetting') as SettingForm;
        if (!settings) {
            Object.assign(form, baseSetting);
        } else {
            Object.assign(form, settings);
            if (form.gameLogo) {
                gameLogoList.value.splice(0);
                gameLogoList.value.push({
                    'id': 'gameLogo',
                    'name': 'LOGO',
                    'status': 'finished',
                    'url': form.gameLogo,
                });
            }

        }
        loading.value = false;
    } catch (error) {
        message.error(error instanceof Error ? error.message : '发生错误！请联系管理员');
    }
});
const customRequestTeam = ({ file }: UploadCustomRequestOptions) => {
    if (!file.file) {
        return;
    }
    const reader = new FileReader();
    reader.readAsDataURL(file.file);
    reader.addEventListener(
        'load',
        async (event) => {
            const result = event.target?.result;
            if (typeof result !== 'string') {
                return;
            }
            form.gameLogo = result;
        }
    );
};
// 头像上传
const beforeAvatarUpload = (options: {
    'file': UploadFileInfo
}) => {
    const { file } = options.file;
    if (!file) {
        return false;
    }
    if (file.size > 10 ** 6) {
        message.error('图片文件大小不能大于1MB');
        return false;
    }
    return true;
};
const handleSave = async () => {
    try {
        loading.value = true;
        await storeHelper.set('baseSetting', form);
        message.success('保存成功');
    } catch (error) {
        message.error(error instanceof Error ? error.message : '发生错误！请联系管理员');
    } finally {
        loading.value = false;
    }
}
// 文件上传
</script>
<style scoped lang='scss'>
.form-item {
    display: flex;
    align-items: center;
    padding: 12px 64px;

    &.center {
        justify-content: center;
        gap: 12px;
    }

    h6 {
        display: block;
        width: 120px;
        font-weight: bold;
        font-size: 13px;
        margin: 0
    }
}
</style>